<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box{
            width: 300px;
           margin: 30px;
        }
             h1{
                text-indent:1em ;
                line-height: 30px;
                color:rgb(177, 120, 120);
                font-size: 20px;
                background-position: center center;
                background-color: #518700(101, 230, 101);
               
            }
             h1 img{
                    vertical-align: middle;
            }
        
            .box ul{
                
                list-style-type: none;
                background-image: linear-gradient(#e6e9bb, #cccfcc);
                
                 
            }
            .box ul li{
                text-indent: 2em;
                font-size: 12px;
                line-height: 28px;
                color: #1a66b3;
                background-repeat: no-repeat;
                background-position: left  center;
               
            }
            .box ul li:nth-child(1){
                    background-image: url(./img/book_no01.gif);
                   
            }
            .box ul li:nth-child(2){
                background-image: url(./img/book_no02.gif);
            }
            .box ul li:nth-child(3){
                background-image: url(./img/book_no03.gif);
            }
            .box ul li:nth-child(4){
                background-image: url(./img/book_no04.gif);
            }

            .box ul li:nth-child(5){
                background-image: url(./img/book_no05.gif);
            }
            .box ul li:nth-child(6){
                background-image: url(./img/book_no06.gif);
            }
            .box ul li:nth-child(7){
                background-image: url(./img/book_no07.gif);
            }
            .box ul li:nth-child(8){
                background-image: url(./img/book_no08.gif);
            }
            .box ul li:nth-child(9){
                background-image: url(./img/book_no09.gif);
            }
            .box ul li:nth-child(10){
                background-image: url(./img/book_no10.gif);
            }

            a{
                text-decoration:none
            }
            a:hover{
                color: green;
                text-decoration: underline;
            }
    </style>
</head>
<body>
    <div class="box">
       
        
          <h1><span> 畅销书排行</span>
        <img src="./img/bang.gif" alt=""></h1>
      
          <ul >
            <li><a href=""> 不抱怨的世界(畅...</a></li>
            <li><a href="">遇见未知的自己...</a></li>
            <li><a href="">高效能人士的七个习惯</a></li>
            <li><a href="">被迫强大（北外女生香奈儿...</a></li>
            <li><a href="">遇见心想事成的自己（《遇...</a></li>
            <li><a href="">世界上最伟大的推销员（插...</a></li>
            <li><a href="">我的成功可以复制（唐骏亲...</a></li>
            <li><a href="">少有人走的路：心智成熟的...</a></li>
            <li><a href="">活出全新的自己——唤醒...</a></li>
        </ul>
    </div>
</body>
</html>